<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变色的注册登陆卡</title>
    <style>
        /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f9f9f9;
        }

        .wrapper {
            position: relative;
            width: 400px;
            height: 500px;
            background: #444;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            z-index: 1;
        }

        .form-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .wrapper.activeSignUp {
            animation: wrapperSignupShowJellyAnimate 1s ease forwards;
            animation-delay: 1.2s;
        }
        .wrapper.activeSignIn {
            animation: wrapperSigninShowJellyAnimate 1s ease forwards;
            animation-delay: 1.2s;
        }

        .wrapper.activeSignUp .form-wrapper.sign-in {
            animation: hideJellyAnimate 1s ease forwards;
        }

        .wrapper.activeSignIn .form-wrapper.sign-in {
            animation: showJellyAnimate 1s ease forwards;
            animation-delay: 1.2s;
            transform: scale(0,0);
        }

        .wrapper .form-wrapper.sign-up {
            position: absolute;
            top: 0;
            left: 0;
            transform: scale(0,0);
        }
        .wrapper.activeSignUp .form-wrapper.sign-up {
            animation: showJellyAnimate 1s ease forwards;
            animation-delay: 1.2s;
        }

        .wrapper.activeSignIn .form-wrapper.sign-up {
            animation: hideJellyAnimate 1s ease forwards;
        }

        
        @keyframes hideJellyAnimate {
            0%{
                transform: scale(1,1);
            }
            25%{
                transform: scale(.9,1.1);
            }
            50%{
                transform: scale(1.1,0.9);
            }
            75%{
                transform: scale(.95,1.05);
            }
            100%{
                transform: scale(0,0);
            }
        }

        @keyframes showJellyAnimate {
            0%{
                transform: scale(0,0);
            }
            25%{
                transform: scale(.95,1.05);
            }
            50%{
                transform: scale(1.1,0.9);
            }
            75%{
                transform: scale(.9,1.1);
            }
            100%{
                transform: scale(1,1);
            }
        }

        @keyframes wrapperSignupShowJellyAnimate {
            0%{
                transform: scale(1,1);
            }
            25%{
                transform: scale(.95,1.05);
            }
            50%{
                transform: scale(1.1,0.9);
            }
            75%{
                transform: scale(.9,1.1);
            }
            100%{
                transform: scale(1,1);
            }
        }
        @keyframes wrapperSigninShowJellyAnimate {
            0%{
                transform: scale(1,1);
            }
            25%{
                transform: scale(.95,1.05);
            }
            50%{
                transform: scale(1.1,0.9);
            }
            75%{
                transform: scale(.9,1.1);
            }
            100%{
                transform: scale(1,1);
            }
        }
        h2 {
            font-size: 30px;
            color: #fff;
            text-align: center;
        }

        .input-box {
            position: relative;
            width: 320px;
            margin: 30px 0;
            border-bottom: 2px solid #fff;
        }

        .input-box label {
            position: absolute;
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
        }

        .input-box input {
            width: 100%;
            height: 40px;
            background: transparent;
            border: none;
            outline: none;
            padding: 0 5px;
            font-size: 16px;
            color: #fff;
        }

        .input-box input:focus~label,
        .input-box input:valid~label {
            top: -5px;
        }

        .forgot-pass {
            margin: -15px 0 15px 5px;
        }

        .forgot-pass a {
            color: #fff;
            font-size: 14px;
            text-decoration: none;
        }

        .forgot-pass a:hover {
            text-decoration: underline;
        }

        button {
            width: 100%;
            height: 40px;
            background: #fff;
            border-radius: 30px;
            cursor: pointer;
            border: none;
            outline: none;
            font-size: 16px;
            color: #444;
            font-weight: 500;
        }

        .sign-link {
            font-size: 14px;
            text-align: center;
            margin: 15px 0;
        }

        .sign-link p {
            color: #fff;
        }

        .sign-link p a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
        }

        .sign-link p a:hover {
            text-decoration: underline;
        }

        .social-platform {
            font-size: 14px;
            color: #fff;
            text-align: center;
        }

        .social-icons a {
            display: inline-block;
            width: 35px;
            height: 35px;
            background: transparent;
            border: 1px solid #fff;
            border-radius: 50%;
            margin: 15px 6px 0;
            text-align: center;
        }

        .social-icons a:hover {
            background: #fff;
        }

        .social-icons a i {
            color: #fff;
            font-size: 14px;
            line-height: 35px;
            transition: .5s;
        }

        .social-icons a:hover i {
            color: #444;
        }

        .curved {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #976ed7;
            z-index: -2;
            clip-path: circle(98% at 0 0);
            transition-delay: 1.2s;
        }
        .bg-animate{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #976ed7;
            z-index: -1;
            clip-path:circle(0% at 0 0 );
        }
        .bg-animate.active{
            transition: clip-path 1.2s ease-out ;
            clip-path:circle(98% at 0 0 );
        }
        .colors {
            position: absolute;
            right: 0;
            background: #444;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .colors .color {
            position: relative;
            width: 20px;
            height: 20px;
            background-color: var(--clr);
            margin: 10px;
            border-radius: 50%;
            cursor: pointer;
        }

        .colors .color.active {
            border: 2px solid #fff;
            transform: scale(1.5);
        }
    </style>
    <link rel="stylesheet" href="https://libs.cdnjs.net/font-awesome/6.2.1/css/all.min.css">
</head>

<body>
    <div class="wrapper">
        <div class="bg-animate" id="bg-animate"></div>
        <div class="curved" id="curved"></div>
        <div class="form-wrapper sign-in">
            <form action="">
                <h2>Sign In</h2>
                <div class="input-box">
                    <input type="text" required>
                    <label for="">Username</label>
                </div>
                <div class="input-box">
                    <input type="password" required>
                    <label for="">Password</label>
                </div>
                <div class="forgot-pass">
                    <a href="">Forgot Password?</a>
                </div>
                <button type="submit">Sign In</button>
                <div class="sign-link">
                    <p>Don't have an account?<a href="#" onclick="activeSignUp()">Sign up</a></p>
                </div>
                <div class="social-platform">
                    <p>Or sign in with</p>
                    <div class="social-icons">
                        <a href="#">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-google"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                    </div>
                </div>

            </form>
        </div>

        <div class="form-wrapper sign-up">
            <form action="">
                <h2>Sign Up</h2>
                <div class="input-box">
                    <input type="text" required>
                    <label for="">Username</label>
                </div>
                <div class="input-box">
                    <input type="email" required>
                    <label for="">Email</label>
                </div>
                <div class="input-box">
                    <input type="password" required>
                    <label for="">Password</label>
                </div>
                <button type="submit">Sign Up</button>
                <div class="sign-link">
                    <p>Already have an account?<a href="#" onclick="activeSignIn()">Sign In</a></p>
                </div>
            </form>
        </div>
    </div>
    <div class="colors">
        <span onclick="changeColor('#77dd77')" class="color" style="--clr:#77dd77;"></span>
        <span onclick="changeColor('#f67599')" class="color" style="--clr:#f67599;"></span>
        <span onclick="changeColor('#976ec3')" class="color active" style="--clr:#976ec3;"></span>
        <span onclick="changeColor('#1db9c3')" class="color" style="--clr:#1db9c3;"></span>
        <span onclick="changeColor('#ffb347')" class="color" style="--clr:#ffb347;"></span>
    </div>
    <script>
        const wrapper = document.querySelector('.wrapper')
        function activeSignIn(){
            wrapper.classList.add('activeSignIn')
            wrapper.classList.remove('activeSignUp')
        }
        function activeSignUp(){
            wrapper.classList.add('activeSignUp')
            wrapper.classList.remove('activeSignIn')
        }
        function changeColor(color){
            const curved = document.getElementById('curved');
            const bgAnimate = document.getElementById('bg-animate');

            curved.style.background=color;
            bgAnimate.style.background=color;
            bgAnimate.classList.add('active');
            setTimeout(function(){
                bgAnimate.classList.remove('active');
            },1200)
        }
        const color = document.querySelectorAll('.color')
        function activeLink(){
            color.forEach((item)=>{
                item.classList.remove('active');
            })
            this.classList.add('active')
        }
        color.forEach((item)=>{
            item.addEventListener('click',activeLink);
        })
    </script>
</body>

</html>